* {
    margin: 0;
    padding: 0;
}

#head {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 200px auto 0 auto;
    transform-style: preserve-3d;
    transform: rotateX(360deg) rotateY(360deg);
    transition: transform 5s linear;
}

#head>div {
    opacity: 0.7;
    position: absolute;
    width: 300px;
    height: 300px;
}

.top {
    transform: rotateX(90deg) translateZ(150px);
    background: red;
}

.bottom {
    transform: rotateX(-90deg) translateZ(150px);
    background: blue;
}

.left {
    transform: rotateY(90deg) translateZ(150px);
    background: yellow;
}

.right {
    transform: rotateY(-90deg) translateZ(150px);
    background: orange;
}

.before {
    transform: translateZ(150px);
    background: black;
}

.after {
    transform: rotateX(-180deg) translateZ(150px);
    background: pink;
}

.test {
    display: flex;
    flex-direction: column;
}

.test div {
    margin-top: 300px;
    background: red;
}

.test div:nth-child(1) {
    order: 1;
}

.test div:nth-child(2) {
    order: 2;
}

.test div:nth-child(3) {
    order: 3;
}

.test div:nth-child(4) {
    order: 4;
}

.test div:nth-child(5) {
    order: 5;
}